<template>
    <div class="selection01">
        <div class="city_selection">

            <!-- 选择城市 -->
            <div>
                <el-cascader v-model="city.startCity" class="cascader_start" :options="options" clearable
                    placeholder="出发地" filterable />
                <button class="iconfont icon-fanzhuanmoren fanzhuan" :class="{ 'rotate360': showAnimate }"
                    @animationend="reset" @click="play">
                </button>
                <el-cascader v-model="city.endCity" class="cascader_end" :options="options" clearable placeholder="目的地"
                    filterable />
            </div>
            <div class="chaxun">
                <el-button type="primary" @click="throttle(select_data)">查询</el-button>
            </div>
        </div>

        <!-- 选择时间 -->
        <div class="time_selection">

            <div class="demo-date-picker">
                <div class="block">
                    <el-date-picker v-model="value1" type="date" placeholder="出发时间"
                        :default-value="new Date(2024, 3, 1)" />
                </div>

                <!-- 选择类型 -->
                <div class="type">
                    <div class="type01" v-show="airticket_store">
                        <el-switch v-model="value_air" active-text="经济舱" inactive-text="公务舱/头等舱" />
                    </div>
                    <div class="type01" v-show="trainticket_store">
                        <el-switch v-model="value_train" active-text="二等座" inactive-text="一等座" />
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue"
import { Edit } from '@element-plus/icons-vue'
import { DefineProps } from "vue";
import Link from "../api/Link.js";
import apiurl from "../api/url.js";
import Getdate from "../utils/getdata.js"
import { ElMessage } from 'element-plus'
//pinia本地化存储用户信息
import { tictetdata } from "../store/Ticketdata.js";
import { storeToRefs } from "pinia";
const tictet = tictetdata();


//父组件给子组件传递参数，判断是否展示座位类型
const props = defineProps({
    msg: {
        type: Number,
        default: 0
    }
})
let airticket_store = ref(false)
let trainticket_store = ref(false)
onMounted(() => {
    if (props.msg === 1) {
        airticket_store.value = true
    }
    if (props.msg === 2) {
        trainticket_store.value = true
    }
})
//选择类型数据初始化
const value1 = ref('')
let Grown_man = ref(1)
let Children = ref(0)
let infant = ref(0)
//城市选择的数据
const options = [
    {
        value: 'China',
        label: '国内',
        children: [
            {
                value: 'shanxi_province',
                label: '山西省',
                children: [
                    {
                        value: 'taiyuan_city',
                        label: '太原市',
                    },
                    {
                        value: 'jincheng_city',
                        label: '晋城市',
                    },
                    {
                        value: 'datong_city',
                        label: '大同市',
                    },
                    {
                        value: 'yuncheng_city',
                        label: '运城市',
                    },
                ],
            },
            {
                value: 'beijing_province',
                label: '北京市',
                children: [
                    {
                        value: 'zhaoyang_city',
                        label: '朝阳区',
                    },
                    {
                        value: 'shunyi_city',
                        label: '顺义区',
                    },
                    {
                        value: 'haidian_city',
                        label: '海淀区',
                    },
                    {
                        value: 'fengtai_city',
                        label: '丰台区',
                    },
                ],
            },
        ],
    },
    {
        value: 'foreign',
        label: '国外',
        children: [
            {
                value: 'european',
                label: '欧洲',
                children: [
                    {
                        value: 'layout',
                        label: '德国',
                    },
                    {
                        value: 'color',
                        label: '瑞士',
                    },
                    {
                        value: 'typography',
                        label: '英国',
                    },
                    {
                        value: 'icon',
                        label: '法国',
                    },
                ],
            },
            {
                value: 'america',
                label: '美洲',
                children: [
                    {
                        value: 'us',
                        label: '美国',
                    },
                    {
                        value: 'spain',
                        label: '西班牙',
                    }
                ],
            },
        ],
    },
]
//存储出发地和目的地
let city = ref({
    startCity: null,
    endCity: null
})
//查询功能
const value_air = ref(true)
const value_train = ref(true)

let select_data = () => {
    console.log(city.value.startCity);
    console.log(city.value.endCity);
    console.log(value_air.value);

    console.log(value1.value);

    ElMessage({
        showClose: true,
        message: '请稍等，正在查询...',
        type: 'success',
    })

    //根据用户选择的座位类型搜索相关票的信息
    //1代表飞机票，2代表火车票，3代表船票，4代表汽车票
    if (props.msg === 1) {
        Link(apiurl.ticketList, "POST", { type: 1, startCity: city.value.startCity, endCity: city.value.endCity, createDate: value1.value, seatType: value_air.value }).then((ok: any) => {
            console.log(ok)
            tictet.tictet_data_air = ok
            if (ok.length == 0) {
                const message = document.querySelector('.el-message__content')?.parentNode
                //判断提示框的数量   
                if (document.getElementsByClassName('el-message__content').length == 1) {
                    setTimeout(function () {
                        message.parentNode.removeChild(message);
                    }, 100)
                }
                ElMessage({
                    showClose: true,
                    message: '当前地点暂无航班，试一试其他地方吧...',
                    type: 'error',
                })
            }
        })
        tictet.selection_state_1 = true
    }
    if (props.msg === 2) {
        Link(apiurl.ticketList, "POST", { type: 2, startCity: city.value.startCity, endCity: city.value.endCity, createDate: value1.value, seatType: value_air.value }).then((ok: any) => {
            console.log(ok)
            tictet.tictet_data_train = ok
            if (ok.length == 0) {
                const message = document.querySelector('.el-message__content')?.parentNode
                //判断提示框的数量   
                if (document.getElementsByClassName('el-message__content').length == 1) {
                    setTimeout(function () {
                        message.parentNode.removeChild(message);
                    }, 100)
                }
                ElMessage({
                    showClose: true,
                    message: '当前地点暂无火车，试一试其他地方吧...',
                    type: 'error',
                })
            }
        })
        tictet.selection_state_2 = true
    }
    if (props.msg === 3) {
        Link(apiurl.ticketList, "POST", { type: 3, startCity: city.value.startCity, endCity: city.value.endCity, createDate: value1.value }).then((ok: any) => {
            console.log(ok)
            tictet.tictet_data_ship = ok
            if (ok.length == 0) {
                const message = document.querySelector('.el-message__content')?.parentNode
                //判断提示框的数量   
                if (document.getElementsByClassName('el-message__content').length == 1) {
                    setTimeout(function () {
                        message.parentNode.removeChild(message);
                    }, 100)
                }
                ElMessage({
                    showClose: true,
                    message: '当前地点暂无渡轮，试一试其他地方吧...',
                    type: 'error',
                })
            }
        })
        tictet.selection_state_3 = true
    }
    if (props.msg === 4) {
        Link(apiurl.ticketList, "POST", { type: 4, startCity: city.value.startCity, endCity: city.value.endCity, createDate: value1.value }).then((ok: any) => {
            console.log(ok)
            tictet.tictet_data_bus = ok
            if (ok.length == 0) {
                const message = document.querySelector('.el-message__content')?.parentNode
                //判断提示框的数量   
                if (document.getElementsByClassName('el-message__content').length == 1) {
                    setTimeout(function () {
                        message.parentNode.removeChild(message);
                    }, 100)
                }
                ElMessage({
                    showClose: true,
                    message: '当前地点暂无大巴，试一试其他地方吧...',
                    type: 'error',
                })
            }
        })
        tictet.selection_state_4 = true
    }
}

// 定义一个标志
let canRun = ref(false);
//节流函数，接受参数为目标函数和延迟时长
const throttle = (fn: any) => {
  if (!canRun.value) {
    fn();
    canRun.value = true
    setTimeout(function () {
      canRun.value = false;
    }, 5000)
  } else {
    return
  }
};

//目的地与出发地的反转
//开始动画
let showAnimate = ref(false)
let a = ref()
const play = () => {
    showAnimate.value = true
    a.value = city.value.startCity
    city.value.startCity = city.value.endCity
    city.value.endCity = a.value
}
//停止动画
const reset = () => {
    showAnimate.value = false
}
</script>

<style lang='scss'>
.selection01 {
    display: inline;
    border-radius: 5px;
}

.type01 {
    padding-left: 110px;
    font-size: 15px;
    justify-content: end;
}

.type02 {
    display: flex;
    justify-content: end;
    padding-right: 100px;
    font-size: 15px;
}

.type02_button {
    margin-left: 20px;
}

.type {
    width: 700px;
    display: flex;
    align-items: center;
    margin-right: -500px;
    padding-left: 120px;
}

.time_selection {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: solid 1px #dadada;
}

.demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.demo-date-picker .block {
    width: 200px;
    padding: 30px 0;
    text-align: center;
    flex: 0.4;
    position: relative;
    margin-right: 200px;
    padding-left: 250px;
}

.demo-date-picker .block:last-child {
    border-right: none;
}

.demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.fanzhuan {
    background-color: transparent;
    border: 0px;
    font-size: 25px;
    position: relative;
    margin-left: 50px;
    margin-right: 50px;
    color: #409eff;
}

@keyframes rotate360 {
    100% {
        transform: rotate(360deg);
    }
}

.rotate360 {
    animation: rotate360 .5s ease-out 0s;
}

.city_selection {
    height: 100px;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: solid 2px black;
    border-bottom: solid 1px #dadada;
}

.cascader_start {
    margin-right: 100px;
}

.cascader_end {
    margin-left: 100px;
}

.chaxun {
    margin-left: 150px;
}
</style>